<template>
    <div id="app">
      <div id="show">
        <schart 
            class="wrapper"
            :canvasId="canvasId"
            :type="type"
            :width="width"
            :height="height"
            :data="data"
            :options="options"
        ></schart>
        </div>
        <el-button type='primary' @click="change0" class="change_btn">折线图</el-button>
        <el-button type='primary' @click="change1">柱状图</el-button>
        <el-button type='primary' @click="change2">环形图</el-button>
        <el-button type='primary' @click="change3">饼图</el-button>
    </div>
</template>
<script>
import Schart from 'vue-schart';
export default {
     created(){
        this.fetch()
    },
    data() {
        return {
            canvasId: 'myCanvas1',
            type: 'line',
            width: 800,
            height: 1200,
            data: [],
            options: {
                title: '班次销售额统计',
                padding:50
            }
        }
    },
    components:{
        Schart
    },
   
    methods:{
      async fetch(){
      const res =await this.$http.get('show_money')
      this.data=res.data
      console.log(res.data)
    },
    change0(){
        this.type='line'
        this.fetch()
    },
    change1(){
        this.type='bar'
        this.fetch()
    },
    change2(){
        this.type='ring'
        this.fetch()
    },
    change3(){
        this.type='pie'
        this.fetch()
    }
    }
    
}
</script>
<style>
.wrapper{
  width: 60rem;
  height: 30rem;
}
.change_btn{
    margin-left: 50px;
}
</style>
